<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			
			table{
				background-color: #000000;
				width: 500px;
			}
			tr{
				background-color: white;
			}
		</style>
	</head>
	<body>
		<div id="box">
		<form id="user">
			用户名：	<input type="text"value="zhl" placeholder="请输入姓名"/></br> </br>
			年龄：	<input type="text" value="18" /></br></br>
			性别：	<input type="radio" name="sex" value=0 checked/> 男
					<input type="radio" name="sex" value=1 />女</br></br>
			爱好：	<input type="checkbox" value="h1"/>学习
					<input type="checkbox" value="h2"/>健身
					<input type="checkbox" value="h3"/>游泳
					<input type="checkbox" value="h4"/>工作
					<input type="checkbox" value="h5"/>电影
					<input type="checkbox"/>全选/全不选
					<button type="button">反选</button></br></br>
			学历：	<select>
						<option value="e1">小学</option>
						<option value="e2">中学</option>
						<option value="e3">高中</option>
						<option value="e4">大学</option>
					</select></br></br>
					<button type="button" onclick="add()">添加</button></br></br>
		</form>
		<table border="0" cellspacing="1" cellpadding="0">
			<thead>
				<tr>
					<th>序号</th>
					<th>姓名</th>
					<th>年龄</th>
					<th>性别</th>
					<th>爱好</th>
					<th>操作</th>
					</tr>
			</thead>
			<tbody>
				
			</tbody>
		</table>
	</div>
	<script type="text/javascript">
	var arr = [];
	function add(){
		var userInp = document.querySelectorAll("form>input");
		var user = userInp[0].value;
		var age = userInp[1].value;
		var xueli = document.querySelector("form>select")
		if(user&&age){
			var sex = getUserSex();
			var hobby = getUserHobyy();
			var xueli1 = xueli.value;
			var obj = {
				id:1++,
				user:user,
				age:age,
				sex:sex,
				hobby:hobby,
				xueli:xueli1
			}
			arr.push(obj);
			showpage(arr);
		}else{
			alert("用户名和年龄不能为空")
		}
	}
	function getUserSex(){
		var sexIpt=document.querySelectorAll("form>input")
		var sex;
		if(sexIpt[0].checked){
			sex=sexIpt[0].value;
		}else{
			sex=sexIpt[1].value;
		}
		return sex;
	}
	function getUserHobyy(){
		var hobbyIpt=document.querySelectorAll("form>input");
		var hobby=[];
		for(var i=0;i<hobbyIpt;i++){
			if(hobbyIpt[i].checked){
				hobby.push(hobbyIpt[i].value);
			}
		}
		return hobby;
	}
	var checkAll=document.getElementById("checkAll");
	checkAll.onclick=function(){
		var f=this.checked;
		var ipts=document.querySelectorAll("div#hobby>label>input");
		for(var i=0;i<ipts.length;i++){
			ipts[i].checked=f;
		}
	}
	var notCheck=document.getElementById("notCheck");
	notCheck.onclick=function(){
		var ipts=document.querySelectorAll("form>input");
		for(var i=0;i<ipts.length;i++){
			ipts[i].checked= !ipts[i].checked;
		}
		fn1();
	}
	var ipts=document.querySelectorAll("form>input");
	for(var i=0;i<ipts.length;i++){
		ipts[i].onclick=function(){
			fn1();
		}
	}
	function fn1(){
		var f=true;
		for(var a=0;a<ipts.length;a++){
			if(!ipts[a].checked){
				f=false;
				break;
			}
		}
		checkAll.checked=f;
	}
	function showPage(arr){
		var tbody=document.getElementById("tbody");
		tbody.innerHTML="";
		var trs="";
		for(var i=0;i<arr.length;i++){
			trs+=`
				<tr>
					<td>${i}</td>
					<td>${arr[i].user}</td>
					<td>${arr[i].age}</td>
					<td>${arr[i].sex=="0"?"小哥哥":"小姐姐"}</td>
					<td>${setEducation(arr[i].education)}</td>
					<td>${setHobby(arr[i].hobby)}</td>
					<td>
						<a onclick=upd(${JSON.stringify(arr[i])})>编辑</a>
						<a onclick=del(${arr[i].id})>删除</a>
					</td>
				</tr>
			`;
		}
		tbody.innerHTML=trs;
	}
	function upd(obj){
		console.log("你要修改的数据:",obj);
	}
	function del(id){
		console.log("你要删除的id:",id);
	}
	function setEducation(attr){
		var obj={
			e1:"小学",
			e2:"中学",
			e3:"高中",
			e4:"大学",
		}
		console.log("attr:",attr,"obj["+attr+"]:",obj[attr]);
		return obj[attr];
	}
	function setHobby(arr){
		console.log("arr:",arr);
		var obj={
			h1:"学习",
			h2:"健身",
			h3:"游泳",
			h4:"工作",
			h5:"电影",
		}
		var str="";
		for(var i=0;i<arr.length;i++){
			if(i==arr.length-1){
				str+=obj[arr[i]];
			}else{
				str+=obj[arr[i]]+","
			}
		}
		console.log("str:",str)
		return str;
	}
	</script>
	</body>
</html>
